<template>
  <div id="echartOne">
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as expertAnalysis from '../../api/expertAnalysis.js'
export default {
  props: {
    timer: {
      type: Array
    }
  },
  data () {
    return {
      echartsX: [],
      echartsY: []
    };
  },

  mounted () {

  },

  methods: {
    getData (timer) {
      let param = {
        startTime: timer[0],
        endTime: timer[1]
      }
      expertAnalysis.queryCountGroupByArea(param).then(response => {
        if (response.state=="SUCCESS") {
          let mess = response.data.map(item => ({
            area_city: item.area_city,
            p_cnt: item.p_cnt
          }))
          this.echartsX = mess.map(item => item.area_city)
          this.echartsY = mess.map(item => item.p_cnt)
          this.initChart()
        }
      }).catch(error => {
        console.log(error)
      })
    },
    initChart () {
      this.echart = echarts.init(document.getElementById('echartOne'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: this.echartsX || ['省级', '西安市', '渭南市', '宝鸡市', '咸阳市', '铜川市', '延安市', '榆林市',
            '汉中市', '安康市', '商洛市']
        },
        yAxis: {
          type: 'value',
          name: '人数/人'
        },
        series: [
          {
            data: this.echartsY || [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110],
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#73E3FA'
              }, {
                offset: 1,
                color: '#37ADDB'
              }]),
              borderRadius: 10
            },
            // 设置条柱宽度
            barWidth: 20,
            type: 'bar'
          }
        ]
      }
      this.echart.setOption(option)
    },
  },
};
</script>

<style lang="scss" scoped>
#echartOne {
  width: 880px;
  height: 300px;
}
</style>